<template>
  <view class="container-root">
    <view class="head">
      <text>{{ commonStore.setting?.siteName }}</text><text>{{commonStore.defaultCity?.name}}</text>
    </view>
    <!--轮播图-->
    <view class="rotation">
      <swiper class="swiper" circular indicator-dots autoplay>
        <swiper-item class="swiper-item" v-for="(item, index) in rotations" :key="index">
          <image :src="item.image" mode="scaleToFill" />
        </swiper-item>
      </swiper>
    </view>
    <!--轮播图 end-->
    <!--找会场-->
    <view class="find-info">
      <vew class="aside">
        <text class="title">找会场</text><text class="subtitle">1对1专属会议顾问帮找场地</text>
      </vew>
      <view class="main">
        <view class="item row" @click="showCtys = true">
           <view class="title">活动城市</view>
           <view class="content"> 
              <text>{{commonStore.defaultCity?.name}}</text>
              <i class="iconfont icon-dingwei"></i>
           </view>
        </view>
        <view class="item">
          <view class="title">活动时间</view>
          <view class="content">
            <text>活动举办时间？</text>
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </view>
        <view class="item">
          <view class="title">活动人数</view>
          <view class="content">
            <text>参加人数？</text>
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </view>
        <view class="item">
          <view class="title">活动预算</view>
          <view class="content">
            <text>大致预算？</text>
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </view>
        <view class="item">
          <view class="title">活动类型</view>
          <view class="content">
            <text>办一场什么活动？</text>
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </view>
        <view class="item row">
          <view class="title">其他需求</view>
          <view class="content">
            <text>你的需求项目？</text>
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </view>
        <view class="item row">
          <view class="title">联系电话</view>
          <view class="content">
            <text>请输入手机号</text>
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </view>
      </view>
    </view>
    <!--找会场 end-->
    <!--品牌-->
    <view class="brand">
      <view class="title">战略合作品牌直订专区</view>
    </view>
    <!--品牌 end-->
  </view>
  <ctys v-model:display="showCtys" @finish="showCtys = false"  />
</template>

<script setup lang="ts">
import { ref ,watch} from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useCommonStore } from '@/stores/common'
import { GetDefaultCity } from '@/api/common'
import Ctys from '@/components/Ctys.vue'
const commonStore  = useCommonStore()
/**
 * 轮播图
 */
const rotations =ref<Rotation[]>()
const showCtys = ref<boolean>(false)
onShow(() => {
  uni.getLocation({
    type: 'gcj02',
    success: res => {
      GetDefaultCity(res.latitude, res.longitude).then((res:ResponseData<RegionDetails>) => {
        if(res.success && res.data) {
          commonStore.defaultCity = res.data
        }
      })
    }
  })
  getRotations()
})
/**
 * 加载
 */
const load = () => {
  console.log(commonStore.defaultCity)
}
/**
 * 默认城市修改
 */
watch(() => commonStore.defaultCity, (val) => {
  load()
},{deep: true,immediate: true})
const getRotations = () => {
  rotations.value = [
    {
      url: '轮播图1',
      image: 'https://img.yzcdn.cn/vant/apple-1.jpg'
    },
    {
      url: '轮播图2',
      image: 'https://img.yzcdn.cn/vant/apple-2.jpg'
    },
    {
      url: '轮播图3',
      image: 'https://img.yzcdn.cn/vant/apple-3.jpg'
    }
  ]
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.uni-margin-wrap {
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
    uni-image {
      width: 100%;
    }
	}
</style>
